<template>
  <div class="bgc" style="background-color: #fff">
    <div class="m-topl">
      <div class="wp">
        <div class="left">
          <div class="tit">书籍筛选<em>{{ total }} 条结果</em>
            <div class="sift" @click="formState.show = true">筛选</div>
          </div>
        </div>
        <div class="right">
          <div class="m-searchl">
            <div class="ll">
              <div class="icn"><img src="/images/jl-i01.png" alt="" /></div>
              <a-input-search v-model:value="formState.q" placeholder="输入书籍名称/作者" enter-button="搜索" @search="getList()"
                :allowClear="formState.allowClear" />
            </div>
            <div class="m-selectl">
              <a-select ref="select" v-model:value="formState.sort" @change='getList()' style="width: 200px">
                <a-select-option value="price_asc">价格从低到高</a-select-option>
                <a-select-option value="price_desc">价格从高到低</a-select-option>
                <a-select-option value="updatedAt_desc">最新发布</a-select-option>
                <a-select-option value="sales_desc">购买最多的</a-select-option>
                <a-select-option value="views_desc">浏览最多的</a-select-option>
              </a-select>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="m-marketl">
      <div class="wp">
        <div class="col-l" :class="{ open: formState.show === true }">
          <form action="">
            <div class="m-choosel" ref="mChooselRef">
              <div class="back" @click="formState.show = false">返回</div>
              <a-collapse v-model:activeKey="activeKey" expand-icon-position="right" :bordered="false" ghost accordion>
                <a-collapse-panel header="发行阶段">
                  <div class="m-chlistl1">
                    <a-radio-group @change="getList" v-model:value="formState.phase" :options="plainOptions" />
                  </div>
                </a-collapse-panel>
                <a-collapse-panel header="价格">
                  <div class="m-chpricel1">
                    <div class="price">
                      <input type="text" v-model="formState.minPrice" placeholder="最小值" class="inp"><em>到</em><input
                        v-model="formState.maxPrice" type="text" placeholder="最大值" class="inp">
                    </div>
                    <div class="btn">应用</div>
                  </div>
                </a-collapse-panel>
                <a-collapse-panel header="书籍分类">
                  <div class="m-chlistl1">
                    <a-radio-group @change="getList" v-model:value="formState.type" :options="types.category" />
                  </div>
                </a-collapse-panel>
                <a-collapse-panel header="书籍语言">
                  <div class="m-chlistl1">
                    <a-radio-group @change="getList" v-model:value="formState.language" :options="types.language" />
                  </div>
                </a-collapse-panel>
              </a-collapse>
            </div>
            <div class="g-btnl2">
              <a href="" class="btn">重置</a>
              <a href="" class="btn">取消</a>
            </div>
          </form>
        </div>
        <div class="col-r" ref="mMarketlRef">
          <div class="m-tagl">
            <a-tag @close='deleteTag(1)' v-if="formState.phase" closable>{{ formState.phase }}</a-tag>
            <a-tag @close='deleteTag(2)' v-if="formState.minPrice && formState.maxPrice" closable>{{ formState.minPrice + ' - ' +formState.maxPrice }}</a-tag>
            <a-tag @close='deleteTag(3)' v-if="formState.type" closable>{{ formState.type }}</a-tag>
            <a-tag @close='deleteTag(4)' v-if="formState.language" closable>{{ formState.language }}</a-tag>
            <!-- <a-tag closable>金浆果</a-tag>
            <a-tag closable>铜浆果</a-tag>
            <a-tag closable>1-100USD</a-tag>
            <a-tag closable>艺术传记</a-tag> -->
            <a-tag @click='deleteTag()' class="all">清除全部</a-tag>
          </div>
          <ul class="ul-listl2 l2" v-if="listl1.length">
            <li v-for="(item, index) in listl1" :key="index">
              <div @click="gotoDetail(item)" class="con">
                <div class="icon">
                  <img :src="item.icon" alt="">
                </div>
                <div class="pic">
                  <img :src="item.src" alt="">
                </div>
                <div class="txt">
                  <div class="tit">{{ item.tit }}</div>
                  <div class="desc">{{ item.desc }}</div>
                  <div class="info">
                    <div class="headpic">
                      <img :src="item.headpic" alt="">
                    </div>
                    <div class="rr">
                      <div class="stit">{{ item.stit }}</div>
                      <div class="snum">{{ item.snum }}</div>
                    </div>
                  </div>
                  <div class="num">版权价格：<span>{{ item.num }}</span></div>
                </div>
              </div>
            </li>
          </ul>
          <empty-sty v-else />
          <div class="m-pages">
            <a-pagination v-model:current="current1" page-size="12" show-quick-jumper :total="total" @change="onChange" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>

import { reactive, ref, onMounted, onUnmounted } from 'vue';
import request from '~/services/request'
import { RouterLink, RouterView, useRouter } from 'vue-router'
const router = useRouter()
// 页码
const current1 = ref(1);
const total = ref(0)
const types = ref({})
const formState = reactive({
  skip: (current1.value - 1) * 12,
  take: 12,
  sort:'updatedAt_desc'
});
const activeKey = ref(['0']);
const plainOptions = ref(['GOLD', 'SILVER', 'COPPER', 'BLUE']);
const listl1 = ref([

])
const onChange = (page) => {
  current1.value = page
  formState.skip = (current1.value - 1) * 12
  getList()
};

const mMarketlRef = ref(null);
const mChooselRef = ref(null);

var topOff = 14*document.documentElement.clientWidth/100
const scrollListener = () => {
  if (mMarketlRef.value && mChooselRef.value) {
    const marketlHeight = mMarketlRef.value.offsetHeight - 700;
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    console.log(marketlHeight);
    console.log(scrollTop);
    if (scrollTop > marketlHeight) {
      mChooselRef.value.style.position = 'absolute';
      mChooselRef.value.style.bottom = '0';
      mChooselRef.value.style.top = 'auto';
    } else {
      mChooselRef.value.style.position = 'fixed';
      mChooselRef.value.style.bottom = 'auto';
      mChooselRef.value.style.top = 'topOff';
    }
  }
};
function deleteTag(type) {
  if (type == 1) {
   delete formState.phase 
  } else if (type == 2) {
    delete formState.maxPrice 
    delete formState.minPrice 
  } else if (type == 3) {
    delete formState.type 
  } else if (type == 4) {
    delete formState.language 
  } else {
    delete formState.phase 
    delete  formState.maxPrice 
    delete  formState.minPrice 
    delete  formState.type 
    delete  formState.language 
  }
  getList()
}
function getList() {
  if(formState.q==''){
    delete formState.q
  }
  request.get_clusters(formState).then(res => {
    listl1.value = res.results.map(item => {
      return {
        id: item.id,
        icon: item.phase && item.phase == 'GOLD' ? '/images/b-i1.png' : (item.phase == 'SILVER' ? '/images/b-i2.png' : (item.phase == 'COPPER' ? '/images/b-i3.png' : (item.phase == 'BLUE' ? '/images/b-i4.png' : undefined))),
        src: item.bannerImages[0]?item.bannerImages[0]:'/images/imgl1.jpg',
        tit: item.title,
        desc: item.description,
        headpic: '/images/imgl2.jpg',
        stit: item.cluster?.name,
        snum: item.cluster?.clusterId,
        num:  item.price?.[item.phase?.toUpperCase().toLowerCase() + 'Price'] ?
        item.price?.[item.phase?.toUpperCase().toLowerCase() + 'Price'] : 0+' USD',
      }
    })
    total.value = res.total
  })
}
function gotoDetail(item) {
  router.push('/marketDetails?id=' + item.id)
}
onMounted(() => {
  getList()
  request.api_config({ id: 'all' }).then(res => {
    types.value = res
  })
  window.addEventListener('scroll', scrollListener);
});

onUnmounted(() => {
  window.removeEventListener('scroll', scrollListener);
});

</script>